<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ACE in Action</title>
        <style type="text/css" media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            body{
                background-color: #ccc;
            }
            #container{
                padding: 15px;
            }
            #editor { 
                position: absolute;
                top: 0;left: 0;right: 0;bottom: 0;
            }
            #codeEditor{
                position: relative;
                width: 60%;
                height: 700px;
                float: left;
            }
            #toolBar{
                height: 30px;
                padding: 10px;
                border: 2px solid #3D3E3F;
                background-color: #FFF;
            }
            #toolBar label,#toolBar select {
                line-height: 30px;
                height: 30px;
            }
            #toolBar button {
                float:right;
                padding: 5px 10px;
                background-color: #5cb85c;  
                border-color: #5cb85c;  
                color: #FFF;  
                -moz-border-radius: 5px;  
                -webkit-border-radius: 5px;  
                border-radius: 5px; /* future proofing */  
                -khtml-border-radius: 5px; /* for old Konqueror browsers */  
                text-align: center;  
                vertical-align: middle;  
                border: 1px solid transparent;  
                font-weight: 900;
                cursor: pointer;
                outline: none;
            }
            #toolBar button:hover{
                opacity: 0.8;
            }
            #testView{
                float: left;
                height: 700px;
                width: 40%;
                background-color: #676a6c;
            }
        </style>
        <script src="./src/ace.js" type="text/javascript" charset="utf-8"></script>
        <script src="./src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="container">
            <div id="toolBar">
                <label>语言:</label>
                <select id="selectLanguage">
                    <option value="php">PHP</option>
                    <option value="html">HTML</option>
                    <option value="javascript">JS</option>
                    <option value="java">Java</option>
                    <option value="python">Python</option>
                    <option value="c_cpp">C_cpp</option>
                    <option value="r">R</option>
                    <option value="ruby">Ruby</option>
                    <option value="sql">Sql</option>
                    <option value="sh">Sh</option>
                    <option value="text">Text</option>
                </select>
                <label>主题:</label>
                <select id="selectTheme">
                    <option value="monokai">monokai</option>
                    <option value="clouds">clouds</option>
                    <option value="terminal">terminal</option>
                    <option value="dreamweaver">dreamweaver</option>
                    <option value="github">github</option>
                    <option value="chrome">chrome</option>
                    <option value="twilight">twilight</option>
                    <option value="chaos">chaos</option>
                    <option value="ambiance">ambiance</option>
                    <option value="clouds_midnight">clouds_midnight</option>
                    <option value="cobalt">cobalt</option>
                    <option value="tomorrow">tomorrow</option>
                    <option value="tomorrow_night">tomorrow_night</option>
                    <option value="xcode">xcode</option>
                    <option value="sqlserver">sqlserver</option>
                </select>
                <button id="run">Run</button>
            </div>
            <div id="codeEditor"></div>
            <div id="testView"></div>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
    function rendEditor(language="php",theme="monokai"){
        editor = ace.edit("editor");//初始化对象
        editor.setTheme("ace/theme/" + theme);//主题
        editor.session.setMode("ace/mode/" + language);//语言类型
        editor.setFontSize(18);//字体大小
        editor.setReadOnly(false); //设置只读（true时只读，用于展示代码）
        editor.setOption("wrap", "free");//自动换行,设置为off关闭
        //代码提示
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        // var code = editor.getValue();//获取代码
        // console.log(code);
    }
    window.onload = function (){
        //初始化代码、编辑器
        var oTestView = document.getElementById('testView');
        var codeEditor = document.getElementById('codeEditor');
        oTestView.style.height = window.innerHeight - 90 + "px";
        codeEditor.style.height = oTestView.style.height;
        var oBtnRun = document.getElementById('run');
        var initCode = "<?php \n echo 'hello world!'; \n?>";
        var html = '<div id="editor"><textarea>'+initCode+'</textarea></div>';
        codeEditor.innerHTML = html;
        rendEditor();

        //定义语法
        var oLanguage = document.getElementById('selectLanguage');
        var language = oLanguage.value;
        //定义主题
        var oTheme = document.getElementById('selectTheme');
        var theme = oTheme.value;
        
        //切换语法
        oLanguage.addEventListener("change", function(){
            language = oLanguage.value;
            rendEditor(language);
        }, false);
        //切换主题
        oTheme.addEventListener("change", function(){
            theme = oTheme.value;
            language = oLanguage.value;
            rendEditor(language,theme);
        }, false);
        //运行JS
        oBtnRun.addEventListener("click", function(){
            if(oLanguage.value == "javascript"){
                var code = editor.getValue();//获取代码
                eval(code);//运行代码
            }else{
                alert('暂时仅支持运行JS');
            }
        }, false);

        window.onresize = function (){
            oTestView.style.height = window.innerHeight - 90 + "px";
            codeEditor.style.height = oTestView.style.height;
        }
    }

    </script>
</html>